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Introduction 

Si I'idee d'utiliser des Feuilles de Styles en Cascade vous effraie, tranquillisez-vous. Le fait d'utiliser un ordinateur peut etre 
terrifiant pour quelqu'un qui le decouvre pour la premiere fois, mais apres un certain temps, on n'y pense plus. Le tout, c'est d'y 
aller par petites etapes au depart, et c'est ce que je compte faire dans cette serie de tutoriels. Une etape a la fois ! 

Que vous utilisiez un editeur WYSIWYG sans jamais vous occuper du code source qu'il y a derriere, ou meme si vous n'avez 
jamais cree la moindre page Web, ce tutoriel va vous mettre dans la bonne direction. 

Je pars du principe que vous ne savez rien, ou pas grand-chose, de la fagon dont on monte une page Web. II s'agit vraiment 
de « tout reprendre a zero ! » 


De quoi aurez-vous besoin ? 

De rien de particulier. Si vous avez un editeur de page web, tres bien. Sinon, vous pouvez utiliser n'importe quel editeur de 
texte : Bloc-Notes sur un PC, ou alors SimpleText ou TextEdit sur un Mac. Si vous utilisez deja DreamWeaver ou GoLive, 
sachez que nous allons utiliser le mode « source. » 

Pas de panique ! Un editeur graphique n'est pas essentiel, parce que je ne vais pas trap m'occuper de graphiques pour 
commencer. 

Ah, vous aurez besoin d'un navigateur, ga va sans dire. En fait, je recommanderais de prendre plusieurs navigateurs differents. 
Si vous ne disposez que d'Explorer, vous devriez egalement prendre Mozilla (http://www.mozilla-europe.org/fr/) ou d'autres 
dans cette liste des Nouveaux Navigateurs (http://www.wpdfd.com/editorial/wpd0204news.htm) ( etablie en fevrier 2004 et 
non remise a jour, NdT ). 

Si vous voulez telecharger vos pages vers un serveur Web, vous aurez besoin d'un programme FTP standard, mais ne vous en 
inquietez pas pour I'instant, tout va etre fait sur votre ordinateur. 


Premiere etape : une page de base 

Avant toute chose, il nous faut une page Web de base. Voici la page Web la plus simple possible. 


<html> 

<head> 

</head> 

<body> 

Voici ma page Web 
</body> 

</html> 


Nous avons ici trois ensembles de « balises »; les balises vont generalement par paires, mais pas toujours. Celle qui englobe 
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toute la page est la paire de balises <html>. . ,</html>. La premiere <html> est la « balise ouvrante », et la « balise 
fermante » est identique sauf qu'elle a un caractere de barre oblique entre le < et le html>. 

A I'interieur de la balise html se trouvent deux autres paires de balises. 

La partie <head>. . ,</head> contient des informations qui ne vont pas se voir sur votre page Web, la plus importante etant le 
titre qui apparalt dans la barre de titre de votre navigateur. II faut inserer le titre de votre page entre une paire de balises de 
titre comme ceci... 


<html> 

<head> 

<title>Ma page</title> 

</head> 

<body> 

Voici le contenu de ma page Web ! 
</body> 

</html> 


La paire de balises <body>. . ,</body> contient I'integralite de votre page Web, le texte, les images, les animations Flash, tout 
ce que vous voulez. Vous pouvez soit taper le code dans votre editeur de texte ou dans la fenetre « source » d'un editeur 
WYSIWYG, soit le copier-coller a partir d'ici. 



Voici mon HTMLephant. Bon d'accord, ce n'est pas tres original, mais au moins vous vous en souviendrez ! 


Done, vous voila avec une page Web qui fonctionnera dans n'importe quel navigateur (une fois que vous I'aurez enregistree). 
Appelez-la « index.html », parce que e'est le nom de la premiere page sur tous les sites Web. Vous pouvez enregistrer le 
fichier n'importe ou sur le disque dur de votre ordinateur, mais pour que les choses restent bien en ordre, creez un nouveau 
dossier pour y ranger vos pages Web. 


La fagon normale d'ouvrir votre page dans le navigateur est d'utiliser la commande « Ouvrir » dans le menu « Fichier » du 
navigateur, mais il y a un moyen plus rapide. Creez un raccourci pour votre fichier ou copiez-le, et placez-le sur le bureau. A 
partir de la, vous n'aurez qu'a faire glisser a la souris I'icone de votre fichier vers la fenetre du navigateur, et votre page 
apparaltra dans toute sa splendeur ! Elle devrait ressembler a ceci. (http://www.pompage.ne t/I MG/html/cssdezero 
/page modele01.html) 

Bien qu'elle soit merveilleuse, il manque a votre page web un ingredient essentiel : du contenu. Qa ne rime pas a grand-chose 
d'avoir une page Web si elle ne dit rien d'interessant (en-dehors de « Voici le contenu de ma page Web ! »), mais e'est votre 
affaire. 


Quel que soit le contenu, il devra etre inclus entre la paire de balises <body>. . ,</body> pour que le navigateur I'affiche. 

Tant qu'on se contente de placer un texte dans une page Web nue comme ici, il n'a ni structure, ni style. Quand je parle de 
structure, je veux dire que les mots vont de gauche a droite et de haut en bas sans autre mise en valeur que I'ordre dans 
lequel ils apparaissent. II est plus logique de regrouper ces mots et ces phrases en paragraphes, titres, sous-titres : bref, vous 
voyez, les trues de base qu'on vous a appris a I'ecole. 
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Les navigateurs ignorent les retours a la ligne ou les paragraphes que vous avez dans votre texte brut. Ils ignorent aussi les 
tabulations, et si vous avez place plus d'un espace entre deux mots, ils ignoreront egalement les espaces supplementaires. 

II est utile, dans presque tous les textes, d'avoir un titre, un sous-titre, quelques paragraphes distincts et peut-etre une 
signature a la fin. 

Dans le HTML, le mecanisme permettant de faire ceci est fourni par encore d'autre balises de mise en forme. 

On cree un paragraphe en incluant du texte au sein d'une paire de balises <p>. . ,</p>. Un paragraphe en HTML, c'est tout 
simplement un bloc de texte d'une ou plusieurs phrases avec un petit bout d'espace pour le separer du suivant : exactement 
comme ici. 

Pour les titres, il y a six differents degres de mise en valeur, qui vont du plus eleve <hl>. . ,</hi> jusqu'au plus bas <h6>. . . 
</h6>. Ils ressemblent a ceci... 

Void un titre hi 

Voici un titre h2 
Void un titre h3 
Voici un titre h4 

Voici un titre h5 
Void un titre h6 

Comme vous le voyez, leur taille diminue quand la valeur de leur chiffre augmente, le <h4> faisant a peu pres la meme taille 
que la « petite » police du texte que vous lisez ici. <h5> et <h6> sont plus petits, mais en caracteres gras. 

II existe une poignee d'autres petites astuces qui permettent de jouer avec le texte pour mettre en valeurs certains mots ou 
expressions. Plutot que de penser a leur aspect, reflechissez a leur fonction reelle. 

Le caractere gras est une version plus lourde de la police de texte, et se marque par <b>. . ,</b>. Toutefois, le mot « gras » 
est un terme de style pour I'impression, et sur le Web il est preferable d'utiliser <strong>. . ,</strong>. Meme si cela revient 
au meme sur votre ecran, le HTML doit aussi fonctionner sur d'autres supports. Les logiciels qui lisent les pages Web aux 
personnes malvoyantes comprendront ce strong et le prononceront avec la force necessaire. 

L'italique s'applique, vous I'aurez devine, grace a <i>. . ,</i>. La aussi, avec HTML, mieux vaut ne pas utiliser ce style visuel 
mais plutot <em>. . ,</em>. On obtient ainsi un effet d'italique quel que soit I'outil qui reproduit le texte. 

Le soulignement peut s'effectuer avec la paire de balises <u>. . ,</u> mais un soulignement dans une page Web a un sens 
particulier. II sert generalement a indiquer un lien. Mieux vaut ne pas utiliser le soulignement comme mode de mise en valeur, 
cela peut creer une confusion pour les lecteurs. 

L'autre balise importante est le retour a la ligne <br>. Contrairement aux autres balises, celle-ci ne requiert pas de balise 
fermante, qui n'aurait pas beaucoup de sens d'ailleurs : ou la mettrait-on ? 

En utilisant ces balises de mise en forme de base, le texte commence a prendre forme. II devient plus proche de ce que vous 
pourriez produire avec un traitement de texte. 

Cette page de base aura sans doute un aspect different dans d'autres navigateurs et sur d'autres ordinateurs. Chaque 
navigateur a un ensemble de styles par defaut, et sauf instruction contraire de votre part, il utilisera ces donnees par defaut. 
Pour ignorer ces styles par defaut, nous allons tout simplement produire nos propres styles qui seront regroupes dans une 
« feuille de styles » collective. 


Deuxieme etape : Une Feuille de Style. 

Une feuille de style est un concept assez simple, c'est une page de definitions ou de caracteristiques concernant le style qui 
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indiquent au navigateur comment afficher les divers elements d'une page. Si vous vous demandez ou le terme de « cascade » 
va arriver, ne vous inquietez pas encore a son sujet. J'y reviendrai plus tard quand nous commencerons a appliquer les styles 
a not re HTML . 

Pour faire simple, nous allons ecrire notre feuille de style dans la page Web. Plus tard, vous constaterez que vous pouvez 
avoir une « feuille de style externe » dans un fichier separe, qui peut etre appele par plusieurs pages. Le grand avantage, c'est 
qu'une seule modification dans cette feuille de style principale affectera toutes les pages qui lui sont liees. 

Les styles que nous allons employer sont definis dans la partie <head>...</head> de notre page comme ceci : 


<style type="text/css" title="mes_styles" media="all"> 

<! - - 

- -> 

</style> 

lei, vous voyez une paire de balises <style>...</style> mais il y a en plus quelques attributs qui ont besoin d'etre expliques. 
type="text/css" indique au navigateur que nous utilisons juste du texte pour decrire les styles, aucune fantaisie ici. 
title="mes styles" identifie simplement le style pour votre propre information. 

media="all" C'est la ou ga commence a devenir interessant. Vous pouvez avoir une feuille de style pour decrire a quoi 
ressemble votre page sur un ecran d'ordinateur (media="screen") et une autre completement differente pour definir 
I'impression (media="print"). II y existe d'autres medias comme « projection », « tv », « braille » et « aural ». Maintenant vous 
pouvez comprendre la logique de ne pas employer « bold » et « italic ». Pour I'instant, nous emploierons seulement « all », qui 
est pour tous les usages. 

Les caracteres <!-- et --> sont une maniere de cacher le texte sur une page Web, on peut seulement le voir dans le code. 
Ceci s'appelle « commenter » mais comme les styles sont definis dans la section <head>...</head> de la page, ils ne devraient 
pas apparaltre de toute fagon. 

La premiere chose que nous allons faire est de definir le style du corps de la page. Tout ce qui est contenu entre les balises 
<body>...</body> se verra appliquer ce ou ces styles. 

La definition de base de la partie « body » ressemble a ceci : le mot body suivi d'une paire d'accolades. 


body {} 

Nous allons donner a la page une couleur de fond ... 

Le style par defaut des navigateurs donne habituellement du texte noir sur une page blanche, mais nous allons changer cela en 
un gris pale plus chaud. Void comment nous definissons une valeur pour la couleur de fond du corps de la page. Notez que 
nous n'employons pas un signe egale « = » mais deux points « : ». 


body { background-color: #e8eae8 } 

Qu'est-ce que c'est, #e8eae8 ? 

Les couleurs sur les pages Web sont definies en melangeant 256 nuances de rouge, de vert et de bleu dans diverses 
proportions. Les humains ont 10 doigts sur leurs mains, done ils comptent par dix. Les ordinateurs preferent compter par 
seize, bien qu'ils n'aient pas de doigts, mais une fois que vous allez au-dessus de neuf, il n'y a aucun numero pour representer 
10, 11, 12, 13, 14, et 15. Aussi nous leurs substituons les lettres a, b, c, d, e, f. Ainsi, quand on compte en « hexadecimal », 
10 est represente par « a » et 15 par « f ». Quand vous allez au-dessus de 15, vous ajoutez un deuxieme chiffre et « 10 » 
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represente 16. En utilisant cette methode, tous les nombres de 0 a 255 peuvent etre represents par deux nombres ou lettres. 
255 equivaut ainsi a FF, #ffffff sera du blanc et #000000 du noir. 


Notre couleur de fond est done rouge e8 (232), vert ea (234), bleu e8 (232). Le signe diese devant precise qu'ii s'agit de 
nombres hexadecimaux et non de decimaux ordinaires. 

Parfois vous verrez seulement trois caracteres, par exemple, #2a0. C'est une notation courte pour 22aa00. Quand il y a les 
deux memes caracteres dans chacune des trois valeurs de couleur, vous pouvez vous passer du second caractere et votre 
navigateur comprendra ce que cela signifie. 

#fff = 

En utilisant seulement trois chiffres, vous pouvez avoir 4096 couleurs differentes. Avec six chiffres, les possibles sont de 
seize millions. 



Avec des couleurs a un seul chiffre, le rouge, le vert et le bleu ont chacun 16 etapes de luminosite, qui peuvent etre combinees 
de nombreuses fagons afin de produire toutes les autres. 


Si vous codez a la main, employer des valeurs de couleur a trois chiffres est plus simple et probablement suffisant. 

Quoi qu'ii en soit, ajoutons maintenant une couleur pour la police afin de remplacer le noir. Elle a ete choisie avec I'outil 
« pipette » dans Photoshop, c'est ainsi un nombre hexadecimal de 6 chiffres ... 


body { background-color: #e8eae8; color: #5d665b } 

Notez comment la couleur de fond et la couleur de premier plan (pour le texte) sont separees par un point-virgule. Faites 
attention a ne pas melanger les deux points et les points-virgules ou les choses tourneront vraiment mal. 

Et maintenant, de fagon a ce que le texte ne s'etende pas jusqu'aux bords de notre page, nous pouvons entourer la page d'une 
marge. « margin : 50px » est ajoute a notre definition de style pour la partie « body », de nouveau separee de la precedente 
par un point-virgule. 


body { 

background-color: #e8eae8; 
color: #5d665b; 
margin: 50px 

} 

N'importe quel texte que nous ajouterons maintenant a la page sera par defaut d'un gris-vert fonce sur un fond gris pale. Nous 
verrons plus tard comment ceci peut etre redefini pour des cas speciaux. 

Jetons un oeil sur ce que nous avons fait iusqu'ici. (http://www.pompaae.net/IMG/html/cssdezero/page modele02.htmh 


Troisieme etape : appliquer du style au texte 
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Nous nous sommes deja debarrasses du cote brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on 
peut faire beaucoup plus. On peut changer la police d'ecriture, la taille des caracteres, la quantite d'espace entre les lignes et 
ajouter des details de mise en valeur comme des retraits de paragraphes. 


La police d’ecriture 

Nous allons commencer par le style de police, dans la mesure ou c'est ce qui va apporter le plus grand changement. A la 
difference du papier, les pages Web ne peuvent utiliser que les polices qui sont installees sur I'ordinateur de I'utilisateur : on ne 
peut done pas se contenter d'indiquer la police qui nous plait le plus, il faut utiliser celles qui sont communes a tous les 
ordinateurs (celles qui sont preinstallees avec le systeme). Cela reduit considerablement le choix. Vous allez vous apercevoir 
que vous etes limites a deux ou trois polices serif, a autant de sans-serif et a un style de type machine a ecrire, a 
espacement constant : monospace. Au lieu de ne choisir qu'un seul style de police, on indique une famille, dans I'espoir qu'une 
d'entre elles sera installee sur I'ordinateur du visiteur. 


Arial Black 

Verdana Impact 

Trebuchet MS 

Helvetica Geneva 

POLICES SRNS-SERIF 

Courier 
Courier New 
Monaco 

Lucida 

MONOSPACE 


Palatino 

Georgia Times 

Garamond 

Copperplate 

POLICES SERIF 

Comic Sans MS 

Zapf Chancery 

"Sxu-iA Scybt 

CURSIVE (MRNUSCRIT) 


Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Vous ne pouvez jamais etre certain que telle 
ou telle police est presente, il faut done fournir des alternatives. 


Void une indication courante de famille de polices sans-serif : 


font-family: Verdana, Geneva, Arial, sans-serif; 
Void une famille de polices serif : 


font-family: Georgia, "Times New Roman", Times, serif; 

Remarquez que lorsque le nom d'une police contient plus d'un mot, I'ensemble doit etre place entre guillemets a I'anglaise : 
"Times New Roman". 

Ajoutons les polices sans-serif a nos styles et voyons ce que ga donne. 

Notre page en police sans-serif » (http://www.pompaqe.net/IMG/html/cssdezero/paqe modele03.htmn 


La taille des caracteres 


La question de la taille qu'on assigne aux caracteres est tres delicate. Pour I'impression, on peut fixer une taille de police en 
points, et le caractere aura toujours cette meme taille. II occupera toujours le meme espace sur la page, et les retours a la 
ligne seront toujours a I'endroit que vous aurez choisi. 
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Sur le Web, les tailles de caracteres ne sont pas gravees dans le marbre, et elles peuvent changer d'un ordinateur a I'autre, 
parfois du tout au tout. En fonction de la taille de I'ecran de I'internaute, de son systeme d'exploitation et de son navigateur, les 
caracteres peuvent devenir tellement petits qu'ils en sont illisibles, ou aussi grands que dans des methodes de lecture pour 
enfants. Les internautes ont heureusement la possibility de choisir une taille « confortable » dans les preferences de leur 
navigateurs, et done de reduire un peu ces variations de taille, mais le resultat peut rester tres different de ce que vous 
attendiez. 

Vue la popularity grandissante du Wi-Fi et des systemes de poche, les modes de navigation sur vos pages vont changer 
radicalement dans les prochaines annees. Pour que vos pages restent lisibles a long terme, vous devez raisonner en termes 
de maquettes liquides qui s'adaptent a la taille de I'ecran. 

Repetez apres moi : « Le Web, ce n'est pas la meme chose que le papier ! » 


Tailles de caracteres relatives 

Si vous voulez que vos pages touchent le plus large public, mieux vaut assigner une taille de caracteres relative a la taille que 
le visiteur aura choisie par defaut. II y a plusieurs fagons d'assigner des tailles de caracteres relatives. Vous pouvez utiliser 
des pourcentages de la valeur par defaut (%), ou bien une unite nommee « em », qui correspond a 100%. 1.2em revient a 
120%. La meilleure methode est d'utiliser un ensemble de descriptions pre-definies qui font penser a des tailles de tee-shirts. 
« Medium » revient a 100%, ou lem. « Smaller » est une taille en-dessous, et « Larger » une taille au dessus. II y a aussi 
x-small, xx-small, x-large et xx-large. L'interet d'utiliser ce systeme par rapport aux pourcentages ou aux ems, e'est que les 
navigateurs ne laisseront pas la police d'ecriture devenir si petite qu'on ne puisse plus la lire. Imaginez, par exemple, que vous 
indiquiez une taille de caracteres de 0.7em ou de 70% qui rendrait tres bien sur votre PC. Pour quelqu'un equipe d'un Mac 
avec une taille de caracteres par defaut plus petite, ce 70% pourrait faire passer vos caracteres sous le seuil de la lisibilite. 
xx-small est une bonne solution pour determiner quelle est la taille de caracteres minimum que I'ordinateur peut afficher. 

XX-large x-large large medium small x-smaii xx-small 

Caracteres XX-Small : C'est petit mais letexterestelisible 
Avec une taille fixe trap petite : C'est beaucoup trap petit 


Tailles de caracteres absolues 

Si votre site ne concerne qu'un nombre limite de visiteurs qui utilisent a peu pres le meme type d'ordinateur que vous, vous 
pouvez egalement indiquer des tailles de caracteres en pixels. Les pixels ne varient pas tellement d'un ordinateur de bureau a 
I'autre, et la taille des caracteres sera similaire, sinon identique. Des que Ton passe a des ordinateurs portables ou bien de 
poche, ou encore a des moniteurs tres grands et a haute resolution, les tailles de pixels s'eloignent de la norme, et la taille des 
caracteres sera modifiee d'autant. 

Pour que vous puissiez percevoir les differences, j'ai place ci-dessous trois paragraphes de texte en utilisant trois methodes : 
les pourcentages, les tailles de tee-shirts et les pixels. Sur mon ecran sous Mozilla, leurs tailles sont quasi-identiques, mais ce 
n'est peut-etre pas le cas sur le votre. 

Cette ligne est definie a 85% de la taille du texte qui I'entoure. 

Cette ligne est definie en x-small. 

Cette ligne est definie a 1 1 px absolument. 

Notez qu'il ne faut jamais utiliser les « points » pour indiquer des tailles de caracteres, c'est une unite d'impression. 


L’interlignage 

La quantite d'espace entre les lignes est d'environ 120% de la taille de caracteres par defaut. On peut en ajouter un peu plus, 
ce qui ameliore generalement la lisibilite, surtout si les lignes sont longues. J'evoquerai la longueur des lignes plus tard. Dans 


7 sur 3 1 


notre page d'exemple actuelle, la longueur des lignes est determinee par la largeur de la fenetre du navigateur, done elle est 
peut-etre plus grande qu'il ne faudrait. 

Pour changer I'interlignage, nous avons a nouveau I'option relative (en % ou en ems) ou absolue (en px). Dans notre exemple, 
j'ai indique une hauteur de ligne (line -height), e'est-a-dire la hauteur du caractere et de I'espace supplementaire au dessus, a 
180% de la taille de caracteres (small) pour toute la page. Comme la definition du style de la partie « body » commence a 
etre un peu longue, je I'ai separee en plusieurs lignes. Le navigateur s'en moque, mais e'est plus facile a lire par des humains. 
Tant que les accolades sont presentes et que chaque definition de style est separee des autres par un point-virgule, tout va 
bien. 


body { 

background-color: #e8eae8; 
color: #5d665b; 
margin: 50px; 

font-family: Verdana, Geneva, Arial, sans-serif; 
font-size: small; 
line-height: 180% 

} 

Nous avons maintenant une page plus « aeree » » (http://www.pompage.net/IMG/html/cssdezero/page modele04.html) 


Les paragraphes 

Tout ce que nous avons realise jusqu'a present concernait I'ensemble de la page. Maintenant nous allons voir comment 
appliquer notre style a des zones plus precises. 

Comme je I'ai evoque precedemment, de gros morceaux de texte peuvent etre decoupes en paragraphes pour les rendre plus 
faciles a lire. II existe plusieurs fagons de separer visuellement les paragraphes. On peut ajouter de I'espace supplementaire, 
ou pourquoi pas faire un retrait de premiere ligne. 

En typographie creative, les designers souhaitent parfois utiliser d'autres techniques moins courantes, comme un retrait d'a 
peu pres la moitie de la largeur de la colonne, ou un retrait negatif. Les CSS sont capables de gerer tout cela, mais le 
separateur de paragraphes par defaut est un « espacement de paragraphe » qui fait a peu pres la moitie de la hauteur de 
ligne (line- height). 

Pour qu'un bloc de texte devienne un paragraphe, contentez-vous de I'encadrer par une paire de balises <p>. . ,</p>. Pour 
pouvoir manipuler le style des paragraphes avec CSS, on ajoute p { } aux definitions de style dans la partie « head » de la 
page, a la suite des styles pour « body ». Entre les accolades, ajoutez text-indent: 3em; (indent est le mot anglais pour 
« retrait », NdT) 


<style type="text/css" title="mes_styles" media="all"> 
<! - - 

body { background-color: #e8eae8; 
color: #5d665b; 
margin: 50px; 

font-family: Verdana, Geneva, 

Arial, sans-serif; 
font-size: small; 
line-height: 180% 

} 

p { text-indent: 3em 
} --> 
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</style> 


Cette page est divisee en paraqraphes » (http://www.pompage.net/IMG/html/cssdezero/paqe modele05.htmh 

Remarquez que le premier paragraphe ne presente pas de retrait : il n'est pas encadre par <p>. . .</p>, done ce n'est pas 
officiellement un paragraphe (en termes de HTML). 


Les titres 

J'ai deja explique les six niveaux de titre que le HTML propose par defaut. Rien ne nous oblige a les conserver tels quels, nous 
pouvons les redefinir selon nos besoins. La encore, il ne s'agit que d'ajouter d'autres definitions aux styles. 

Par defaut, les titres sont en grands caracteres gras, et dotes d'espacements supplementaires au-dessus et en-dessous. 
Souvenez-vous que les titres hi, h2 et h3 sont plus gros que le texte normal, tandis que h5 et h6 sont plus petits. 
Amusons-nous avec un titre h3 pour changer sa couleur et sa police de caracteres. 

h3 {color: #966b72; font-family: Georgia, "Times New Roman", Times, serif } 

Nous avons maintenant des titres » (http://www.pompage.net/IMG/html/cssdezero/page modele06.html) 

Vous remarquez peut-etre que j'ai ajoute une ligne vide sous le deuxieme titre. Si vous vous contentez de mettre un 
paragraphe vide (<p></p>) cela ne marchera pas, i! doit y avoir quelque chose entre les balises. Un espace ne fonctionnera 
pas non plus (<p> </p>) parce que HTML ignore les espaces s'ils ne sont pas entre deux caracteres. Ce dont nous avons 
besoin, e'est d'un caractere invisible que nous fournit HTML sous le nom d 'espace insecable que I'on peut taper &nbsp; 
comme ici : 

<p>&nbsp;</p> 

L'espace insecable est egalement tres utile place entre deux mots que vous ne souhaitez pas voir separes lorsque la ligne se 
termine : des noms de personnes ou d'entreprises par exemple. 


D'autres petites manips 

Avant d'aborder la partie suivante, essayons de modifier quelques petites choses dans notre page de texte. 

Dans la definition de la partie « body », j'ai mis une marge de 50 pixels pour tous les cotes. II est possible d'avoir differentes 
marges pour la gauche, la droite, le haut et le bas. II n'y a qu'a les separer comme ceci (respectivement marge du haut, de 
gauche, de droite et du bas, NdT) : 


margin-top: 70px; 
margin-left: 120px; 
margin- right : 50px; 
margin-bottom: 70px; 

Cela va donner quelque chose plus proche d'une page imprimee, avec une marge de gauche plus importante. J'ai aussi 
applique a deux ou trois mots du gras (strong) et des italiques (em). Attention, les italiques rendent mal sur certains 
ordinateurs, et deviennent particulierement difficiles a lire quand la taille est reduite. 

Voyez notre page quand le texte a recu ses styles >> (http://www.pompaqe.net/IMG/html/cssdezero/paqe modele07.html) 

Desormais, vous disposez d'une page qui commence a avoir du style, et sans avoir fourni trap d'efforts. Toutefois, elle 
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ressemble encore a un document tape a la machine ou a I'aide d'un traitement de texte. Dans le prochain article, nous verrons 
d'autres possibilites de mise en page plus interessantes. 

En attendant, vous pouvez vous amuser avec les valeurs des styles de la page que vous venez de creer. Essayez differentes 
polices et tallies de caracteres, differents interlignages. Mais surtout, visionnez votre page avec autant de navigateurs 
differents que possible, pour observer toutes les differences de rendu. 


Quatrieme etape : plus de mise en forme pour le texte 

Avant d'aller plus loin dans la mise en forme du texte, c'est une bonne idee de vous familiariser avec quelques termes basiques 
de typographie. 

Quand nous parlons de la taiile de la police, ou font -size en CSS, cela fait reference a la distance entre le sommet d'une 
lettre majuscule comme « A » jusqu'au bas d'une lettre a jambage comme « p » ou « y ». II peut aussi y avoir un leger espace 
supplementaire appele « interlignage ». Ce mot vient du fait que les imprimeurs utilisaient des petites lattes de plomb entre les 
lignes pour leur donner plus d'espace. (NdT : En anglais, « interlignage » se dit « leading » et le plomb se traduit « lead ».) 


JflMBflGE SUPERIEUR 

CORPS 

JflMBflGE INFERIEUR 
INTERLIGNRGE 



Aujourd'hui, on n'utilise plus de plomb. On dit juste qu'il y a un certain espace entre la base d'une ligne de caracteres et la 
suivante. L'interlignage est done la hauteur du caractere plus cet espace supplementaire. Dans une definition CSS, nous 
pourrions dire line -height: 180%; avec la valeur specifiee en pourcentage, em ou pixels (px). On reviendra sur l'interlignage 
un peu plus loin. 


line height 
line height 


I 

HAUTEUR DE 
LIGNE 


Vertical-align vous permet d'ajuster la ligne de base pour des lettres individuellement par rapport au reste du texte mais 
releve plutot pour un usage specialise (comme les formules mathematiques), et on ne va pas s'etendre sur son cas ici. Dans 
l'exemple basique ci-dessous, j'aurais pu utiliser la balise <sup>2</sup> mais le recours a CSS permet plus de controle. 

E=MC 2 

Les CSS nous donnent egalement le controle sur I'interlettrage (ou crenage), e'est-a-dire I'espace entre chaque caractere ou 
mot. 


letter spacing 
letter spacing 
letter spacing 

C'est tres pratique pour ajouter un style visuel a un gros titre. 
UN TITRE ESPACE. 


letter-spacing: 0.5em; word-spacing: 0.5em 
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Penser a la lisibilite 


Avant que les navigateurs ne supportent aussi bien les CSS qu'a I'heure actuelle, il y avait une caracteristique essentielle qui 
manquait au formatage du texte en HTML , et que maitrisait meme la plus modeste des machines a ecrire , I'interlignage. 
Quand il y a trap peu ou pas du tout d'espace entre les lignes, elles deviennent deprimantes et difficiles a lire. Et plus les 
lignes s'allongent, plus le probleme s'accentue. 

Des lignes trap courtes 
interrompent trap 
le schema de lecture 
de I'oeil de la gauche 
vers la droite. 

Des lignes plus longues que la normale sont aussi fatigantes et le debut de la ligne suivante devient difficile a localiser. 

Pour une lecture confortable, une ligne de texte devrait etre de la meme longueur que une fois et demie a deuxfois la longueur 
d'un alphabet en minuscules. Ce qui signifie entre quarante et soixante caracteres ou huit a dix mots. 

Si les lignes sont plus longues, un interlettrage plus grand aide a la lisibilite. Au debut, beaucoup de pages web avaient leurs 
textes qui s'etendaient d'un bord a I'autre de la fenetre, sans se soucier de la taille d'ecran. Les ecrans sont devenus plus 
larges, mais la pratique continue chez certains. 

Par defaut, il y a un petit interlettrage dans les parametres de texte des navigateurs. C'est approximativement 20 % de la taille 
de la police (hauteur d'une majuscule plus le jambage inferieur). Avec CSS vous pouvez avoir autant d'interlignage que vous le 
souhaitez. Si vous utilisez des tallies de polices relatives, vous pouvez le specifier comme un pourcentage de la taille de la 
police. Exemple : font -size: lem; line -height: i.5em (ce qui equivaut a 150%). Si vous utilisez des tallies de polices fixes, 
vous pouvez indiquer quelque chose comme : font -size: llpx; line-height: I6px. 

La definition pour cette page (NdT: la page (http://www.wpdfd.com/editorial/basics/cssbasics4.html) oriqinale de I'auteur) est 
font -size: small; line -height: 180% ce qui correspond a peu pres a une fois et demie I'interlignage dans un traitement de 
texte ou une ancienne machine a ecrire. Ainsi, dans cet exemple (http://www.pompaqe.net/IMG/html/cssdezero 
/page modele07a.html) le haut de la page n'a pas de marges et le texte n'a pas de parametres d'interlignage. Les 
specifications generales pour I'element body de la page fournissent la famille de police, la taille de la police et les couleurs pour 
les caracteres et le fond de la page. 


body { 

color: #5d665b; 
font-size: small; 

font-family: Verdana, Geneva, Arial, sans-serif; 
background-color: #e8eae8 
} 

Le bloc de texte en bas de I'exemple est encapsule dans une division de la page <div>. . ,</div>. C'est comme une page dans 
une page. Elle possede une marge gauche de 250px, une marge droite de 200px, et I'interlignage est defini a 180%. Ces 
styles sont ajoutes aux specifications generales de I'element body par un procede appele « heritage ». Exactement comme un 
enfant qui peut heriter de certaines caracteristiques de ses parents, puis a son tour les transmettre a ses enfants, certains 
styles CSS « cascadent » quand ils sont imbriques dans d'autres styles. 


<div style="margin-left : 250px; margin- right : 200px; 
line-height: 180%"> . . . </div> 

Les divisions de page (<div>) sont une part tres importante de CSS et nous les etudierons plus en detail la prochaine fois. 
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Le contraste 


Contrairement a une page imprimee que vous lisez par la reflexion de la lumiere, la page sur un ecran d'ordinateur est 
lumineuse. La difference de luminosite entre le texte noir et la page blanche est d'une amplitude beaucoup plus grande sur un 
ecran que sur une page imprimee. Quand on lit de grandes zones de texte noir sur fond blanc, c'est un peu comme quand on 
se promene sous un grand soleil sans lunettes noires. On finit peut-etre par se proteger les yeux en mettant sa main en 
visiere, mais par defaut on a plutot tendance a plisser des yeux et a se sentir mal a I'aise sans vraiment savoir pourquoi. 

Reduire le contraste du texte des pages web permet une lecture plus confortable et moins stressante. Cela dit, si vous 
diminuez trap le contraste, vous commencez a rendre les choses difficiles pour les gens ayant une faible vision. 

Dans un article comme celui-ci (NdT: la page (http://www.wpdfd.com/editorial/basics/cssbasics4.htmh oriqinale de I'auteur) oil 
il y a beaucoup de texte a lire et ou le lecteur est amene a raster quelque temps devant son ecran, il est important d'offrir un 
environnement aussi confortable que possible. J'ai done utilise une teinte de fond legere et des couleurs douces. 


Cinquieme etape : des listes a gogo 

Une autre technique tres courante pour mettre en forme des documents consiste a utiliser des « listes ». Elies ressemblent a 
des paragraphes, avec de petites choses en plus. 

HTML peut nous fournir des listes de base qui ont soit des puces (listes non numerotees) <ul>. . ,</ul>, soit des chiffres 
(listes numerotees) <ol>. . ,</ol> en tete de chaque element de la liste <li>. . ,</li>. Chaque categorie presente quelques 
options que Ton peut indiquer dans le HTML : li type="square" donne des puces carrees, li type="i" donne des chiffres 
romains en bas de casse. 

Liste non numerotee par defaut : 

• Element de liste non numerotee 

• Element de liste non numerotee 

• Element de liste non numerotee 
Liste non numerotee avec puces carrees : 

■ Element de liste non numerotee 

■ Element de liste non numerotee 

■ Element de liste non numerotee 

Liste numerotee par defaut : 

1 . Element de liste numerotee 1 

2. Element de liste numerotee 2 

3. Element de liste numerotee 3 
Liste ordonnee avec chiffres romains : 

i. Element de liste numerotee 1 

ii. Element de liste numerotee 2 

iii. Element de liste numerotee 3 

Les CSS vous offrent davantage de choix et de controle : il suffit d'ajouter une definition pour ol ou ul a vos styles, 
ol {list-style-type: lower- roman; margin: lem 0 lem 40px } 
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Cela revient au meme que si vous I'ajoutiez a chaque element de liste en HTML, et vous avez tout controle sur les marges qui 
entourent I'ensemble de la liste. Les quatre valeurs lem 0 lem 40px correspondent a haut, droite, bas et gauche, et peuvent 
etre exprimees en ems, en pourcentages ou en pixels. 

Si vous souhaitez mieux controler individuellement les elements de liste, vous pouvez egalement leur attribuer des marges, 
pour avoir davantage d'espacement entre les lignes : par exemple... 


ol li { margin: .5em 0 .5em 0 } 

...ajoute un demi-em d'espacement au dessus et en-dessous de chaque element de liste pour une liste numerotee. Pour une 
liste non numerotee, il faudrait le changer en ul li. 

Mieux encore, vous pouvez utiliser vos propres graphiques comme puces. 

ul { list-style-image: url(images/smiley.gif ) } 
ul li { margin: lem 0 lem 0} 


© Qa, c'est genial 

o Qa aussi, vous aimerez 

© Et ga aussi bien sur! 


Et le top, une image de puce differente pour chaque element de liste... 


<li style="list-style-image:url(images/iconel.gif ) ; 
margin: lem 0 lem 0">Des hommes</li> 

<li style=" list -style -image : u rl (images/icone2 . gif ) ; 
margin: lem 0 lem 0">Des images</li> 

<li style="list-style-image:url(images/icone3.gif ) ; 
margin: lem 0 lem 0">Des idees</li> 

<li style="list-style-image:url(images/icone4.gif ) ; 
margin: lem 0 lem 0">Des ecrits</li> 


n 

Des hommes 

rti 

Des images 

■o- 

* 

Des idees 

£ 

Des ecrits 


Les styles definis dans la partie « head » concernent I'ensemble de la page, ce que nous ne souhaitons pas dans le cas 
present. Pour appliquer des styles separement a des elements de liste, il faut le faire « sur place », ou bien encore « inline ». 
Les definitions sont inserees entre les balises HTML <li> et </li>, dans la partie « body » de la page. Notez cependant 
qu'IE6 (Windows) place les icones tres pres du texte. J'ai ajoute un peu d'espace supplementaire au debut de chaque ligne 
pour compenser, comme ceci : 

&nbsp ; Des hommes. 
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Sixieme etape : etablir des liens 


L'important, dans le mot « HTML », c'est la partie « HT », c'est-a-dire Hyper Texte. Sur une page, des liens qu'on ajoute a des 
mots, des phrases ou des images, peuvent etre cliques pour vous transporter a un autre endroit. Ces autres endroits 
s'appellent des « ancres ». Imaginez des bateaux immobiles sur la grande mer du Web, avec une chaine constitute de liens 
qui descend jusqu'a une ancre posee au fond de la mer. Les bateaux sont ancres a des emplacements bien precis, ce qui les 
rend plus faciles a reperer que s'ils derivaient sur la mer. 



Chaque page contient au moins une ancre. Celle par defaut est tout en haut de la page, mais vous pouvez ajouter d'autres 
ancres a n'importe quel point d'une page auquel vous souhaitez pouvoir acceder d'un simple clic. 


<a h ref =" http : //www. wpdfd . com/index . htm"> 

Ceci est un lien vers le haut de ma page d'accueil 
</a> 

Vous voyez la une paire de balises <a>...</a>, avec en plus une partie href="..." dans la premiere balise. II s'agit de 
I'adresse hypertexte de reference ou vous souhaitez vous rendre. 

Si vous placez une ancre a un emplacement bien precis dans une page (en fait, il faudrait la placer juste au-dessus de I'endroit 
oil on veut atterrir), cela donne : 


<a name="mon_ancre"></a> 

II s'agit done d'une paire de balises <a></a> avec, dans notre exemple, name="mon ancre" place dans la balise ouvrante. II n'y 
a rien entre les deux balises. 

Pour acceder a cet emplacement, il faut ajouter un petit bout de code a I'extremite du lien : 


<a href=" http : //www. wpdfd . com/index . htm#mon_ancre"> 

Ceci est un lien vers une ancre de ma page d 1 accueil</a> 

Comme vous le savez, les liens sur une page sont indiques en les rendant visuellement differents du texte environnant. Par 
defaut, on souligne le texte du lien, et on le colorie en bleu. Quand vous cliquez sur un lien, il reagit visuellement en passant a 
la couleur rouge. Quand vous revenez ensuite a ce lien, il est passe a une autre couleur encore, le violet, pour montrer qu'il a 
deja ete visite. 

Quiconque a deja utilise une page Web comprend le principe de ces conventions tres rapidement. 

La presentation par defaut des liens hypertextes en HTML se compose de trois etats distincts. 


Un lien hypertexte i lJn lien h^>ertexte l IJn lien hypertexte 


Remarquez que le curseur change, lui aussi. Le pointeur qui etait par defaut une fleche se transforme en main qui montre de 
I'index lorsque le curseur survole un lien. 

Bien sur, en tant que « designers », I'aspect par defaut des liens ne nous satisfait pas. Le texte souligne, cela peut etre 
pratique mais aussi parfois tres laid. Ce qu'il faut en priorite, c'est qu'un lien soit d'un aspect suffisamment different de son 
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environnement pour que Ton voie qu'il y a la quelque chose de particulier. Le contexte est egalement un facteur important. Tel 
ou tel texte constitue de toute evidence un « menu » de choix, qu'il soit souligne ou non. Sa mise en valeur, sa position dans la 
page, le fait que les mots vous invitent a vous rendre a d'autres endroits sont autant d'indices quant a sa fonction. 

De la meme fagon, quand un mot ou un groupe de mots au sein d'un bloc de texte a un aspect different, c'est sans doute pour 
une bonne raison. Cette raison pourrait etre que Ton veut insister sur I'importance de cette partie, mais la encore, c'est le 
contexte qui donne I'indice, et aussi le fait que d'autres mots ou groupes de mots similaires presentent partout le meme 
aspect. Tout cela ne fonctionnerait pas si chaque lien etait d'une couleur differente. 

Les CSS nous permettent de jouer un peu avec I'aspect des liens. Non, les liens ne sont pas obligatoirement soulignes et 
bleus. Tout ce qu'il y a a faire, c'est d'indiquer une definition pour « a » (les ancres). 


a:link { color: #696; text-decoration: none } 

Comme cette page (la page orig inale (http://www.wpdfd.com/editorial/basics/cssbasics6.html) de J. Gillespie, NdT) presente 
un style de couleurs qui sort un peu du blanc et noir, j'ai change les couleurs des liens en autre chose que le bleu/violet par 
defaut. De plus, text -deco ration : none nous debarrasse du soulignage. 

Pour qu'un lien deja visite soit d'une couleur differente, tapez ceci : 


a:visited { color: #699; text-decoration: none } 

En CSS, il existe aussi un etat supplementaire appele « hover ». II permet de changer la couleur du texte au moment ou le 
pointeur de la souris le survole, ce qui donne tres utilement un indice supplementaire qu'il s'agit d'un lien hypertexte. 


a:hover { color: #c93; text-decoration: underline } 


Vous voyez ainsi apparaitre le soulignement traditionnel si vous le souhaitez, mais seulement de maniere temporaire, lorsque 
le pointeur survole le texte. 

L'etat « actif » d'un lien, c'est ce que Ton voit a I'instant ou on clique sur un lien. II change generalement de couleur, et certains 
navigateurs font aussi apparaitre une boite autour du texte. 


lien non visite etayurvole 

It 


etayctif 


lien deja visite 

k 


Pour definir des liens qui s'appliquent a toute la page, il faut placer quelque chose comme ceci dans les definitions de style 
dans la partie « head » de la page : 


a : link 

{color: #696; 
text-decoration: none; 
background-color: transparent } 
a : visited 

{ color: #699; 
text-decoration: none; 
background-color: transparent } 
a : hover 

{ color: #c93 ; 
text-decoration: underline; 
background-color: transparent } 
a : active 

{ color: #900; 
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text-decoration: underline; 
background-color: transparent } 

L'ordre des definitions de style est important ici. D'habitude, I'ordre n'a aucune importance en definitions CSS, mais ici c'est 
tres important de placer les definitions a: hover et a: active en dernier, sinon elles risquent de ne pas fonctionner. 

Void maintenant un autre etat, pas officialise en CSS. 


* 

C'est un lien mort. II ne fait rien de particulier. Si vous avez un lien sur une page qui ramene a cette meme page, ma foi, ga ne 
rime pas a grand-chose de pouvoir y cliquer pour revenir au point de depart. Ce serait comme un panneau indicateur retourne 
sur lui-meme et indiquant sa propre direction. 

Ilya deux fagons de gerer cela. Vous pouvez transformer le lien en titre, en le mettant davantage en valeur que le reste, ou 
bien vous pouvez le rendre pratiquement invisible, montrant ainsi que ce n'est pas un choix possible. On appelle cela le 
« grisage », et vous en reconnaTtrez le principe pour I'avoir vu en usage sur d'autres programmes de votre ordinateur. 

Mais, direz-vous, pourquoi le placer la si on ne souhaite pas que les gens le choisissent ? 

Eh bien, I'un des principes les plus importants dans le design d'une interface est que Ton essaie de garder pour tous les 
elements la plus grande coherence possible. Si on retire un element d'un menu, par exemple, certains autres vont changer de 
place. Ce sera moins genant pour I'utilisateur si I'interface reste clouee en place. 

Enfin, I'autre element dont nous disposons ici est la couleur de fond (background -color) derriere le texte. Les designers 
changent parfois la couleur de fond pour donner un effet proche du surlignage pour les etats hover ou active. 


etat si^vole 


II ya encore beaucoup d'autres choses a faire avec les liens CSS, nous n'avons fait qu'effleurer la question, mais cela devrait 
suffire a vous permettre de demarrer. Cette page d'exemp le (http://www.pompaqe.net/ I MG/html/paqe modele08.htmD met en 
application les principes que vous venez d'apprendre. 


Septieme etape : les boites CSS 

Nous avons deja vu que le texte dans une page Web peut etre decoupe en titres ou en paragraphes, et que le langage HTML 
prend en charge ces operations. Nous avons egalement vu comment les styles par defaut peuvent etre modifies a votre 
convenance, en leur attribuant de nouvelles definitions de style qui remplacent celles d'origine. Maintenant, je vais me pencher 
sur la fagon de creer vos propres definitions de style pour etendre les possibles du HTML et faire des mises en page plus 
interessantes. 

La partie « body » d'une page contient tout ce qui est visible ; cependant, comme je I'ai montre a i 'etape 3. il est possible de 
decouper cette partie en divisions plus petites et qui ont leurs propres styles. Ces divisions peuvent ne contenir qu'un simple 
caractere, ou au contraire inclure de grands pans rectangulaires de la page. Tout ce que nous avons a faire, c'est d'entourer la 
zone que nous voulons styler d'une paire de balises <div>. . ,</div>. Chacune de ces divisions est comme une mini-page, et 
on les appelle souvent « boites CSS ». Les boites CSS sont les materiaux de base que Ton utilise pour construire des mises 
en page pour le Web, et je vais m'attarder sur la fagon dont elles fonctionnent parce que c'est tres important. 

Les boites CSS peuvent avoir une hauteur et une largeur, une couleur de fond ou meme une image de fond que Ton peut faire 
repeter pour creer un effet graphique. Par defaut, une boite CSS s'etend de la marge gauche a la marge droite du corps de la 
page. Si vous n'avez pas indique de marge pour la partie « body », elle prendra done toute la largeur de la fenetre du 
navigateur. Si vous n'indiquez pas de hauteur pour une boite CSS, elle n'en aura pas. Si vous y placez du texte, elle s'etendra 
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verticalement pour contenir ce texte (ou cette image). 


Pour eloigner du texte du bord d'une boite, on peut ajouter du remplissage (« padding ») comme ceci : 


X PADDING-TOP: 18PX 

a. ~ 

•» 


k 

b. 
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<r 

^ PADDING-BOTTOM: 20PX 


Mieux vaut faire tres attention avec le remplissage, parce que son interpretation dans Internet Explorer est tres differente de 
celle de tous les autres navigateurs. Contrairement a notre illustration, IE place le remplissage a I'interieur de la boite, de telle 


sorte que sa hauteur et sa largeur ne changent pas. Tous les autres navigateurs placent le remplissage en-dehors de la boite, 
ajoutant ainsi a sa largeur et a sa hauteur. Done la taille de votre boite peut varier selon le navigateur avec lequel vous voyez 
la page, ce qui peut avoir des consequences desastreuses si vous etes tenus a des mesures precises au pixel pres. 


Apres le remplissage, vous pouvez placer une bordure (« border ») : 


BORDER-TOP 
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Les bordures existent dans plusieurs styles differents, et vous pouvez traiter chacun des quatre cotes separement pour ce qui 
concerne I'epaisseur, le style et la couleur. Leur aspect varie un peu selon les navigateurs, mais voici a quoi elles ressemblent 
dans Mozilla : 


SOLID 


DOTTED 


DASHED 


DOUBLE 


GROOUE 


RIDGE 


INSET 


OUTSET 


L'epaisseur de la bordure augmente d'autant la taille d'une boite. 

Et pour separer les boites les unes des autres, vous pouvez leur donner des marges (« margins »). 
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MRRGIN-TOP: 25PX 
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MRRGIN-BOTTOM: 28PX 


II est frequent de confondre les marges et le remplissage, surtout que ce qu'on appelle couramment la « marge » d'une page 
dans un livre ou une page Web est en fait du « remplissage » dans la mesure ou c'est un espace qui ne peut sortir de la page, 
il est forcement a I'interieur. Mais souvenez-vous que c'est un cas particulier. Pour le « body » d'une page Web, la marge va 
des cotes vers I'interieur, tandis que toutes les autres marges CSS vont vers I'exterieur. 


Le positionnement absolu 

En plus d'avoir une hauteur et une largeur, les boites CSS peuvent etre placees a n'importe quel emplacement sur la page en 
indiquant position : absolute; 

Le principe du positionnement absolu est facile a comprendre, il correspond a la fagon de voir les choses dans la vie de tous 
les jours. Par exemple, votre maison peut etre situee a 50 metres de la Rue du Nord et a 100 metres de la Rue de I'Est. 

La fagon la plus courante de donner une position a une boite est tout simplement d'indiquer quelque chose comme top:50px; 
left : l00px, mais on n'est pas oblige d'utiliser top et left, cela peut aussi bien etre top et right, bottom et left ou bottom et 
right. 

Void quelques boTtes CSS (http://www.pompaqe.net/IMG/html/paqe modele09.html) avec differents styles, chacune affichant 
sa definition de style. Les possibles de combinaisons sont infinies. 

Quand les boites sont placees a des coordonnees absolues, avec des largeurs et hauteurs bien precisees, cela ressemble 
beaucoup a un travail de collage de coupures de presse ou de photos dans un cahier de souvenirs. Le probleme, c'est que les 
cahiers conserved toujours la meme taille, et pas les pages Web. 


Le positionnement relatif 

Si vous cherchez a decrire la position de la maison du voisin d'a-cote, vous pouvez dire qu'elle est a 70m de la rue du Nord et 
a 100m de la rue de I'Est, mais vous pouvez aussi dire qu'elle est a 5m, juste apres la votre. Le positionnement relatif part du 
principe que les boites CSS sont placees I'une apres I'autre. La premiere boite est celle du dessus, la suivante est 
en-dessous, et la suivante encore en-dessous. De fait, elles flottent de haut en bas, a partir du haut de la page. Ce n'est 
peut-etre pas tres realiste, mais imaginez une piscine couverte, avec a I'interieur toute une pile de matelas gonflables. Le 
premier flotterait jusqu'a la surface, le suivant flotterait vers le haut et se retrouverait coince sous celui du dessus, et ainsi de 
suite. 

Pour obtenir que les boites CSS soient cote-a-cote au lieu de I'une au-dessous de I'autre, il faut leur dire de flotter a gauche 
ou a droite : float: left; ou float: right;. Tout comme nos matelas gonflables si la piscine est suffisamment large, elles se 
tiendront cote-a-cote, tant qu'il y aura de I'espace disponible. Puis elles glisseront a I'etage inferieur. Mieux vaut eviter cette 
situation, en vous assurant que les largeurs cumulees de toute une rangee de boites n'excedent pas la largeur de la page. On 
peut le faire en precisant la largeur en pixels, mais en maintenant le total en-dessous de la largeur minimum d'un navigateur. 
On peut aussi utiliser les pourcentages, a condition de verifier que la somme des pourcentages arrive bien a 100, ou mieux, un 
peu moins. Dans un tel contexte de positionnement relatif, evitez de melanger pixels et pourcentages, sans quoi les resultats 
sont imprevisibles. 

Ces exemples de boites flottantes (http://www.pompaqe.net/IMG/html/paqe modele10.html) montrent le comportement de 
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boites positionnees de maniere relative, en colonnes simples ou multiples. 


Huitieme etape : des div sur mesure 
Qu'est-ce qu'une id ? 

Lorsque vous creez des boites CSS avec des definitions personnalisees, il n'existe pas d'elements HTML pouvant y faire 
appel. II vous faut les inventer. 

Comme il y aura sans doute plusieurs, voire beaucoup de boites CSS (des « div ») dans une page donnee, il faut leur trouver 
des noms. Pour ce faire, on leur attribue des « identites », qu'on appelle id en abrege. Une id fournit a une boite CSS une 
identite qui lui est propre, qui vous permet a vous de bien la reperer et au navigateur de I'afficher correctement. 

Prenons un exemple simple : vous voulez diviser une page en trois parties horizontales. Un « en-tete » en haut presente un 
logo et les liens de navigation. La partie du milieu contient le texte et les images. Tout en bas, vous pouvez aussi avoir un 
« pied de page » donnant des informations de copyright, et peut-etre une repetition de la navigation du haut de page. 

Dans cet exemple (http://www.pompage.net/IMG/html/page modele11.html) , plus precisement, vous trouverez cinq boites 
horizontales, les deux supplementaires servant pour le logo et la barre de navigation, entre I'en-tete et la zone de texte. 



Remarquez que la colonne de droite est plus etroite que celle de gauche, ce qui permet de compenser visuellement I'espace 
supplementaire du a I'aspect crenele de la partie droite du texte, sans quoi celui-ci paraitrait decentre. 

Dans les definitions de style, nous collons un signe diese (#) devant le nom que nous voulons donner a la boite, ce qui en fait 
une « identite ». 


#en-tete { . . . } 

Navigation { . . . } 

#logo { . . . } 

#milieu { . . . } 

#pied-de-page { . . . } 

Puis nous devons Her les definitions aux boites CSS elles-memes, tout simplement en renvoyant a leurs identites (id) comme 
ceci : 

<div id="en-tete">. . ,</div> 

<div id="navigation">. . .</div> 

<div id="logo">. . ,</div> 

<div id="milieu">. . .</div> 

<div id="pied-de-page">. . .</div> 
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Si Ton a deja indique, par exemple, une police d'ecriture dans la declaration de styles pour la partie body, alors nos boites vont 
« heriter » de ces styles. Mais toute definition de style ajoutee aux definitions des boites prendra le pas sur la definition du 
body, qui est plus large. C'est le principe meme de la « cascade ». 

Qu'est-ce qu'une class ? 

Vous aurez parfois besoin d'utiliser la meme boite plusieurs fois sur une meme page. Imaginons que vous voulez separer la 
partie du milieu en deux boites distinctes, ou plus. Dans ce cas, il vous faut une boite « reutilisable » et non pas unique. Une 
boite reutilisable s'appelle une class. Tout comme on a des « classes » de fleurs ou d'insectes, une class designe une meme 
boite mais avec un contenu different. Pour montrer que nous voulons une class reutilisable au lieu d'une id unique, nous 
utilisons le point (.) au lieu du signe diese. 

.milieu {} peut desormais etre utilise aussi souvent qu'on le veut, et sur la div elle-meme, on precise : 


<div class="milieu">. . ,</div> 
<div class="milieu">. . ,</div> 
<div class="milieu">. . ,</div> 


Qu'est-ce qu'un span ? 

Les class, contrairement aux id, peuvent s'appliquer au niveau du texte. Si on veut simplement mettre quelques mots en 
rouge, on peut creer une class speciale, appelons-la .texte rouge : 


.texterouge { #c00 } 


<span class="texterouge">Ce texte est rouge ! </span> 

Au lieu d'entourer le texte que Ton veut en rouge d'un <div>. . ,</div>, on utilise <span>. . ,</span>. On dit que ce style est 
inline, c'est-a-dire en ligne, parce qu'il s'applique a un morceau de texte lui-meme deja contenu dans un <div>. . ,</div>. 

Utilisez <span> . . ,</span> des que vous voulez marquer sur du texte une variation par rapport aux indications generates. II peut 
s'agir de couleur, de police d'ecriture, de taille, de poids, etc. 

Done, en CSS, il y a des elements dits block qui sont constitues de boites rectangulaires, dotees soit d'id uniques, soit de 
class reutilisables. Et nous avons aussi des elements dits inline, qui traitent le texte au caractere pres. 

On commence a aborder les choses serieuses ! 


Neuvieme etape : on met tout ensemble 

Des qu'on aborde des pages Web un peu elaborees, on utilise un melange d'id et de class, voire de positionnement absolu et 
relatif. Retournons a notre page toute simple de la huitieme etape, celle en cinq parties (http://www.pompage.net/IMG/html 
/page modele11.html) : peut-etre pourrait-on avoir plusieurs colonnes dans la partie du milieu. Cela revient a utiliser la 
propriety de flottement (float), et je vais choisir float : left pour m'en tenir au plus simple. 

En general, sur beaucoup de pages Web, la colonne de gauche contient les menus, ce qui veut dire qu'elle peut etre assez 
etroite. 


.col-gauche {} 
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La colonne du mileu contiendra le texte principal. 


.col-milieu {} 

Et tout a droite, nous allons placer une autre colonne etroite, pour des liens de reference ou de la publicity. 


.col-droite {} 

La taille de chaque colonne est indiquee en pourcentage, pour qu'elle soit fluide et s'adapte a la largeur de la page. 

Vous noterez que j'utilise des classes (class) pour ces colonnes, parce que je pourrais souhaiter les reutiliser plus bas sur ma 
page. 

Dans cet exemple (http://www.pompaae.net/IMG/html/oaae modele12.html) . on remplace la simple partie .milieu par trois 
colonnes flottant a gauche. 


<div class=" col -gauche"> . . ,</div> 
<div class="col-milieu">. . ,</div> 
<div class="col-droite">. . ,</div> 



Voila qui ouvre des perspectives de mise en page beaucoup plus interessantes. 

Ne laissez pas de div completement vides, meme si elles ne doivent contenir que du « blanc ». Placez-y un espace insecable 

&nbsp; . 


Dixieme etape : Doctypes et validation 

Nous voila arrives a la dixieme legon de « On reprend tout a zero », et il faut que je vous avoue quelque chose. Tout ce que je 
vous ai montre jusqu'ici, le balisage, les pages d'exemples, eh bien tout ceci est faux ! Bon, en fait, ga va sans doute 
fonctionner correctement (sauf si vous utilisez un navigateur trap ancien), mais si vous testez vos pages avec un verificateur de 
syntaxe, ou bien si vous les soumettez a un quelconque programme de validation, elles ne passeront pas I'epreuve. 

Vous vous demandez peut-etre ce qu'est un programme de validation. 

Vous connaissez surement les correcteurs d'orthographe. Votre programme de traitement de texte en contient 
vraisemblablement un. Ms servent a comparer les mots que vous avez tapes avec ceux de leur dictionnaire integre, et vous 
avertissent s'ils ne trouvent pas de concordance. Peut-etre le mot n'est-il pas dans le dictionnaire, mais peut-etre aussi ne 
I'avez-vous pas tape correctement. Dans les traitements de texte les plus elabores, votre texte peut egalement subir une 
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verification grammaticale, et si vous tapez une phrase qui ne contient pas de verbe ou qui contient trap d'occurences du mot 
« et », ils vous harceleront sans arret. 

Pour qu'un correcteur d'orthographe ou de grammaire puisse faire son travail, il doit savoir quelle langue vous utilisez. Un 
correcteur d'anglais britannique est deja different d'un correcteur d'anglais americain, alors que dire de ceux qui utilisent une 
toute autre langue que I'anglais ? 

De meme qu'on corrige son anglais, son frangais, ou toute autre langue, on peut (et on doit !) corriger egalement son HTML et 
son CSS. Si votre anglais contient une erreur, les gens penseront qu'il s'agit d'une coquille, mais comprendront ce que vous 
voulez dire, il n'y aura pas grand-mal. En revanche, une petite erreur en HTML ou en CSS, c'est une toute autre histoire. 
Quelque chose d'aussi insignifiant en apparence qu'une virgule ou un guillemet mal places peut faire toute la difference entre 
une page qui fonctionne ou non : tout depend du type d'erreur et du navigateur qui essaie de comprendre ce qui se passe. II 
est tres recommande de « verifier I'orthographe » de votre HTML comme de votre CSS avec un « correcteur de syntaxe » ou 
un « validateur ». 

L'un des grands avantages dont vous beneficiez si vous utilisez un editeur HTML de bonne qualite, c'est qu'il contient un 
correcteur de syntaxe integre. Vous ne trouverez pas cela avec de simples editeurs de texte polyvalents. Si vous avez un 
editeur HTML comme HomeSite ou BBEdit, ou bien un editeur WYSIWYG tel que Dreamweaver ou GoLive, vous pourrez 
verifier votre balisage et si possible trouver des suggestions pour en corriger les erreurs. Si vous ne possedez pas de tels 
programmes, vous pouvez utiliser les validateurs en ligne offerts par le W3C : le validateur HTML (http://validator.w3.org/ ) et le 
validateur CSS (http://iiasaw.w3.org/css-validator/ du W3C, ou vous pouvez tout simplement envoyer vos fichiers et recevoir 
un rapport immediat indiquant la liste exhaustive de vos erreurs, sauf si vous n'en avez commis aucune ! 

Bien entendu, le programme de correction doit d'abord savoir quel « langue » vous utilisez pour votre balisage : il y a 
differentes « gammes » de HTML. Jusqu'ici, tous les exemples que j'ai montres sont ecrits en HTML 4.01 : il s'agit de la 
version actuelle, et c'est la plus repandue. Mais il y a differentes versions de HTML 4.01 : « Strict », « Transitional » et 
« FrameSet ». 

Le Strict est constitue d'un ensemble de regies qui definissent tres strictement ce que I'on peut faire ou ne pas faire en HTML. 

Le Transitional est un peu plus comprehensif, et vous permet d'utiliser un HTML un peu plus ancien ainsi que quelques 
particularites propres a certains navigateurs. 

Le Frame Set n'est plus beaucoup utilise de nos jours. Nous n'avons d'ailleurs pas evoque les « frames » (cadres) dans cette 
serie de cours, dans la mesure ou ils sont largement passe de mode depuis I'arrivee des CSS. 

La plupart des gens se contentent tres bien du « Transitional » parce qu'il leur laisse un peu de souplesse, mais il y en a 
d'autres qui aiment que tout soit bien net et reglementaire et qui preferent utiliser le « Strict ». 

Pour que le navigateur sache quel langage vous utilisez pour votre balisage, et dans quelle version, placez une declaration de 
Doctype tout en haut de la page, au-dessus de la premiere balise <html>. En voici un exemple : 

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http : //www. w3 . org/TR/html4/loose . dtd"> 

Je ne vais pas analyser tout de suite tout ce que cela signifie ; contentez-vous de savoir qu'avec ce charabia au sommet de 
votre page, le verificateur de syntaxe ou le validateur sera capable de faire correctement son travail. II sait desormais quels 
sont les standards que vous voulez appliquer a votre page, et va pouvoir la juger en fonction de ceux-ci. 

Des lors que j'ai place un Doctype, je peux passer mes pages au verificateur de syntaxe de mon editeur HTML et m'assurer 
qu'elles sont impeccables. Maintenant qu'on a regie ce petit detail annexe, revenons au style de notre page ! 


Onzieme etape : declarer les styles 

Jusqu'ici, tous les styles que j'ai utilises ont ete integres a la section <head> des pages. De cette fagon, il est facile de 
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regarder le code-source de la page et de voir ce qui s'y passe. Tout est bien mis ensemble au meme endroit. 

Toutefois, il est tres rare que des pages individuelles soient fabriquees a I'unite : il est beaucoup plus probable qu'on trouvera, 
dans un site Web donne, tout un ensemble de pages dont I'aspect est similaire. 

Au lieu de reproduire une declaration de styles sur chaque page, il vaut bien mieux n'avoir qu'une seule feuille de style et faire 
en sorte que chaque page y renvoie individuellement. Du coup, si vous voulez changer la couleur de fond de toutes les pages 
de votre site, ou bien modifier la couleur ou la taille des caracteres, il n'y aura qu'a changer la feuille de style principale. En 
fait, on peut changer totalement I'aspect de tout un site en appliquant juste quelques modifications a un seul et unique fichier. 

Allez done jeter un oeil sur http://www.csszengarden.com/ (http://www.csszenqarden.com/) p our voir ce principe en action. 
Differents designers ont fourni leurs propres feuilles de style pour habiller le contenu d'une meme page, demontrant ainsi de 
maniere admirable comment un seul et meme squelette peut recevoir differentes « peaux » qui changent sa personnalite du 
tout au tout. Pour utiliser une feuille de style externe, tout ce que nous avons a faire consiste a integrer ce type de lien dans 
notre page : 


dink rel="stylesheet" 
h ref=" styles_de_base .css" 
type="text/css" 
media="screen"> 


Cela indique au navigateur qu'il doit chercher les indications de style dans un fichier nomme « styles de base. css ». On 
precise aussi qu'il s'agit d'un simple fichier texte ( d'ou type="text/css" ) et que les styles sont prevus pour un affichage sur 
ecran ( media="screen" ) 

Les feuilles de style ne sont pas limitees a I'affichage sur des ecrans d'ordinateur : vous pouvez produire des feuilles de style 
pour d'autres supports comme I'impression, la projection ou meme le braille. Quand on y reflechit bien, une feuille de papier 
d'imprimante n'a pas du tout la meme taille ni la meme forme qu'un ecran d'ordinateur, et personne n'aura envie de gacher sa 
tres chere encre a imprimer de vastes zones colorees alors que tout ce qu'on veut, e'est conserver comme reference un texte 
noir sur blanc. Une feuille de style pour I'impression doit done reduire la largeur de la page pour qu'elle corresponde a une 
feuille de papier, et contrairement a la feuille de style « ecran », les tailles de caracteres doivent etre indiquees en points 
( pt ). Les couleurs doivent etre simplifiees, voire completement abandonnees. Enfin, tout ce qui restera a faire sera d'ajouter 
un second lien dans la partie <head> juste apres celui pour I'ecran ( screen ). 


dink rel="stylesheet" 
href="styles_pour_impression .css" 
type="text/css" 
media="print"> 

Si vous vous contentez amplement de la meme feuille de style pour I'ecran comme pour I'impression, alors vous pouvez utiliser 
ce lien : 


clink rel="stylesheet" 
href="styles . css" 
type="text/css" 
media="all"> 

Bien que la plupart de mes feuilles de style finissent toujours par se retrouver enregistrees a part, je demarre generalement 
avec une feuille de style interne pour les premieres etapes du design. Une fois satisfait de I'aspect general, je coupe et je colle 
les styles dans un nouveau fichier, et je les remplace par un lien. 


Douzieme etape : les tableaux 
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Je sais bien qu'on utilise des tableaux pour realiser des mises en page depuis la prehistoire du Web, mais je pense avoir 
demontre dans ce feuilleton que les mises en page par CSS offrent davantage de possibles et de souplesse. Les tableaux 
sont faits pour presenter des donnees tabulaires, comme on le ferait avec les feuilles de calcul qu'on utilise pour organiser des 
chiffres ou des mots en rangs et en colonnes. 

Autrefois, avec les anciens navigateurs, il etait possible de changer I'aspect des tableaux et de leurs cellules en utilisant les 
differentes proprietes de tableaux : couleurs de fond, images de fond, etc. Beaucoup de ces caracteristiques sont desormais 
depassees et ne sont plus valides ; meme s'il est encore possible qu'elles fonctionnent, on ne peut plus compter sur elles. 
D'ailleurs, on n'a jamais vraiment pu compter dessus. Quand on cherchait a placer une image de fond pour un tableau sous 
Netscape 4 ou une version anterieure, celle-ci apparaissait individuellement dans chacune des cellules, un peu comme quand 
on regarde a travers un kaleidoscope, ce qui rendait le tout aussi penible a faire qu'inutile. 

Avant, on pouvait sans probleme indiquer une hauteur de tableau en pixels, ou encore en pourcentage de la hauteur de la 
fenetre, mais ce n'est plus possible. Les tableaux fixent leur propre hauteur en fonction de leur contenu. 

La gestion du style des tableaux avec les CSS peut se reveler un peu delicate, et il est difficile de tout prevoir. On peut 
construire sa propre structure de tableau en CSS a I'aide de display:table; et de display:table-cell;, en considerant que 
chaque cellule constitue une boite (div) separee, mais dans la plupart des cas, il est plus simple de se contenter de fournir les 
definitions de style pour les elements HTML du tableau : table, tr, td, th, etc. 

tr represente une rangee de tableau, c'est-a-dire une rangee horizontale de cellules, td est une division de rangee de tableau. 
On peut le voir comme une colonne, mais il ne se comporte pas comme une colonne, et on ne peut pas indiquer une couleur de 
fond ni un style d'ecriture propre a une colonne. 

Les tableaux heritent de certains styles des divs auxquelles ils appartiennent, mais pas de tous. Si la partie body de votre page 
a pour caracteristiques font-family: verdana, arial, sans-serif style et color:#009, le tableau heritera de celles-ci, 
mais pas de la taille du texte ni de son alignement. II y a egalement une hierarchie. Toute regie s'appliquant a un td prendra le 
pas sur celle du tr, qui elle-meme passera avant toute regie generale de style imposee pour I'element table, c'est-a-dire le 
tableau. Vous pouvez tourner ceci a votre avantage. Si vous choisissez le noir comme couleur de fond de tableau, et le blanc 
comme couleur de fond du td, et si vous donnez au tableau un ecartement des cellules de 2 pixels (cellspacing="2"), vous 
obtiendrez un tableau avec des cellules blanches separees par une bordure noire de 2 pixels. 

1 2 3 

1 2 3 

1 2 3 

Le tableau 1 ci-dessus, plus subtil, presente une couleur de fond de tableau transparente, et une 
appliquee aux td. 

Bien entendu, vous avez egalement acces a tous les styles CSS pour les bordures, ce qui signifie que vous n'etes pas 
prisonnier des horribles bordures de tableau par defaut en HTML. Vous pouvez egalement jouer avec les couleurs ou les 
aspects des bordures pour n'afficher que des lignes verticales ou des horizontales, qui seront pleines, pointillees, hachurees ou 
autres. 

12 3 4 

12 3 4 

12 3 4 

Tableau 2. Selon les donnees, on veut parfois insister sur les rangees horizontales, ou bien sur les colonnes verticales comme ci-dessus. 

Titre 1 Titre 2 Titre 3 Titre 4 

12 3 4 

12 3 4 

Tableau 3. Ici un effet de relief en 3D est cree en modifiant les couleurs de bordures. L'en-tete de tableau th regoit une couleur de fond 
plus sombre. 

Une autre idee interessante consiste a attribuer aux tr des images de fond en degrade de couleur. 


4 

4 

4 

legere teinte de couleur de fond est 
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Si vous creez une petite image suffisamment haute pour remplir la cellule tout en restant tres etroite, disons 8 pixels de large, il 
sera possible de la repeter horizontalement avec background- repeat : repeat-x, ce qui est plus fin et elegant que des 
bordures. 

Cette petite image (227 octets) peut etre repetee horizontalement... 

Rangee 1 
Rangee 1 
Rangee 1 
Rangee 1 

Tableau 4. J'ai utilise un degrade legerement plus sombre pour les en-tetes de rangees, et j'ai 
separer les colonnes. 

Si vous voulez appliquer aux cellules individuelles un style different de I'ensemble du tableau, vous pouvez le faire en utilisant 
des definitions de style « en ligne » adjointes aux balises <td> appropriees. 


2 3 4 

2 3 4 

2 3 4 

2 3 4 

ajoute une bordure gauche gris pale pour 


<td style="background-color: #f 00">cellule l</td> 


1 

1 

1 


2 

2 

2 

2 


3 

3 

3 

3 


4 

4 

4 


Tableau 5. Bon d'accord, je suis un peu trap fan de Mondrian, mais I'important c'est de voir qu'on peut appliquer a volonte des styles sur 
des cellules individuelles I 


Cette approche, en revanche, a le desavantage de ne pas permettre ('utilisation d'une feuille de style externe. Tout est grave 
dans le code meme de la page ; mais on peut se I'accorder, de maniere exceptionnelle. Une fagon plus adroite de styler 
rangees et colonnes consiste a les placer au sein de leurs propres div et a les nommer ainsi : 


#colonnel td { ... } 

#colonne2 td { ... } 

Avec cette methode, vous beneficiez d'un certain controle sans pour autant devoir recourir a une construction de tableau par 
div individuelles (ce qui reste une excellente solution, si vous en avez le temps et la patience). 

Je n'ai pas place toutes les declarations de style dans la page, il y en a trap, mais un coup d'oeil sur le code-source vous 
permettra de comprendre ce qui se passe. 

De nombreuses possibles vous sauteront a I'esprit quand vous commencerez a styler vos tableaux. Mais non, ce n'est pas 
obligatoirement barbant de faire des tableaux ! 

Le mois prochain, nous verrons comment styler des formulaires, ainsi que quelques autres petits details. 


Treizieme etape : les formulaires 

Pour de nombreux designers, le style des formulaires dans les pages Web ne constitue pas une grande priorite. Les 
formulaires sont generalement laisses « tels quels », et pour de bonnes raisons d'ailleurs. 

I. Les conventions qui sont utilisees par defaut pour les formulaires fonctionnent assez bien en I'etat. 

II. Si un formulaire n'a pas I'aspect attendu, les lecteurs pourraient ne pas s'y retrouver. 

III. Le style des formulaires peut devenir tres different d'un navigateur a I'autre, selon ('interpretation qu'ils en font. 

Voyons tout cela de plus pres. 
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« Les conventions qui sont utilisees par defaut pour les formulaires fonctionnent assez bien 
en I'etat. » 

Bon, peut-etre. Pourtant on trouve encore un peu partout beaucoup de tableaux mal congus, que ce soit sur papier ou sur le 
Web. 

Moi en tous cas, je deteste remplir des formulaires, et je sais que je ne suis pas seul a reagir ainsi. 

Mais les formulaires sont bien pratiques pour recolter de I'information, d'autant qu'ils la recoltent d'une maniere qui en rend 
I'exploitation assez facile. Alors, quelle est I'erreur commise par les « designers » de formulaires ? 

Le premier gros ecueil apparait lorsque le formulaire semble complique. L'utilisateur est intimide et se place en position 
defensive. 

Et puis, on nous pose des questions qui peuvent paraitre soit inutiles, soit indiscretes. Pourquoi voulez-vous absolument 
connaitre ma date de naissance ? 

L'aspect complique est une question de mise en forme. On peut donner a un formulaire une apparence simple en le presentant 
de maniere propre et ordonnee. La premiere chose dont on doit s'assurer, c'est de bien controler les tallies de police pour ne 
pas les laisser demolir la mise en page. 

La taille et la position des legendes ou des textes explicatifs doivent aussi etre reflechies. Le mieux est de les placer soit 
au-dessus ou en dessous des champs de saisie, soit sur la droite. Si vous tenez vraiment a mettre des textes sur la gauche, 
utilisez align: right; pour eviter de vous retrouver avec d'enormes trous qui deconnectent visuellement le texte de son 
champ, et augmentent la complexity visuelle de la mise en page. Essayez egalement de ne pas avoir trap de failles differentes 
pour vos champs de saisie, et ne remplissez pas les espaces vides a tout prix. Si le champ du code postal est plus court que 
les autres champs d'adresse, ce n'est pas un probleme : ne placez pas pour autant differentes failles de champs sur une 
meme ligne horizontale juste pour gagner de I'espace. 

Sur une page Web, on n'a pas besoin de gagner de I'espace. Choisissez intelligemment les failles de vos champs de saisie. 
Alignez-les verticalement. Gardez-les propres et degages. 


dolQr' Sit 


Ci-dessus, un formulaire qui semble complique. Ilya deux axes verticaux, et le deplacement du regard est perturbe par la 
necessity de sauter horizontalement et verticalement pour trouver le champ suivant. 
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Void un design plus simple, avec un seul axe vertical en plein milieu, ce qui n'interrompt pas le deplacement du regard. 

L'avantage par rapport a un formulaire papier, c'est qu'un formulaire Web masque tout ce qui n'est pas immediatement visible 
dans la fenetre du navigateur, evitant ainsi de noyer le visiteur sous la masse. Neanmoins, un formulaire tres long sur une seule 
page exigera de nombreux defilements verticaux, ce qui peut etre encore pire. Mieux vaut diviser les formulaires longs sur 
toute une serie de pages, a condition toutefois de penser a permettre aux utilisateurs de revenir en arriere s'ils veulent modifier 
quelque chose. 


« Si un formulaire n'a pas I'aspect attendu, les lecteurs pourraient ne pas s'y retrouver. » 

II est clair qu'on ne peut pas « s'eclater » dans le design de formulaires. II faut bien que le lecteur comprenne la fonction d'un 
champ de saisie de texte, comme pour une fenetre pop-up ou un bouton d'envoi. Qa ne signifie pas pour autant que nous 
sommes condamnes au texte noir sur fond blanc (encore que certains navigateurs n'acceptent rien d'autre !) 

Ce serait une erreur d'assimiler un champ de saisie a du texte ordinaire, la fenetre doit avoir son apparence propre, tout en 
indiquant sa fonction. 

Les elements que Ton peut styler sont input, textarea et select, mais attention : tout style attribue a I'element input 
affectera non seulement le champ de saisie de texte, mais egalement les autres outils de saisie que sont les boutons radio, les 
cases a cocher, ainsi que les boutons « Envoyer » et « Effacer ». 

On peut sans risque jouer sur les styles font-family et font-size des polices. La couleur du texte (text-color) peut varier si 
on le souhaite. Pour la couleur de fond (background -color), c'est plus discutable. Si elle est d'une teinte plus pale que celle de 
la page, c'est acceptable, et cela peut rendre I'aspect du formulaire moins agressif. 

Si on change le contour d'un champ de saisie de donnees (« input »), cela modifie egalement le contour du bouton d'envoi, 
qui du coup peut se mettre a ressembler a n'importe quelle zone de texte si on n'y prend garde. Pour eviter cela, il faut done 
« envelopper » le champ de saisie dans une div qui lui sera propre, et se contenter d'appliquer des styles sur #saisie input 
comme ci-dessous : 

#saisie { } 

#saisie input 

{ 

color: #633; 
font-size: 10px; 
background-color: #ebebd9; 
padding: 3px; 
border: double 3px orange 
} 
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NdT : les elements input et textarea ne peuvent etre traduits, car il s'agit de code HTML . Rappelons que input fait 
reference a de la saisie de donnees de formulaire (un nom, une date, un chiffre...), tandis que textarea permet de saisir 
des commentaires, des remarques ou autres textes lonqs. 

Si maintenant vous voulezqu'un champ textarea ressemble a un champ input, vous pouvezfaire ceci : 


#saisie input, #saisie textarea 

{ 

color: #633; 
font-size: 10px; 
background-color: #ebebd9; 
padding: 3px; 
border: double 3px orange 
} 

Quant a I'element select (il s'agit des listes deroulantes), son rendu varie d'un navigateur et d'une plateforme a I'autre. Tout ce 
que nous pouvons faire, c'est fixer une taille et une famille de police. De toute maniere, vous ne pouvez generalement avoir 
aucune idee de I'aspect final, une fois qu'ils auront ete cliques. 


« Le style des formulaires peut devenir tres different d'un navigateur a I'autre. » 

La meilleure des preuves reside dans ces quelques copies d'ecran (http://www.pom pa ge.net/IMG/html/tests formulaires. html) 


Les memes styles interprets sous Explorer (Windows), Mozilla, Safari (Mac) et Opera montrent quelle variete on peut 
trouver. Je reviendrai dans le prochain episode sur les differences entre les interpretations des navigateurs. 

L'important ici est que nous ne cherchons pas a enjoliver les formulaires. Nous essayons de les rendre plus faciles a utiliser et 
moins impressionnants grace a une presentation visuelle reflechie. 

On peut encore faciliter davantage la vie de I'utilisateur avec des scripts de validation de formulaires qui sont bien utiles, mais 
c'est une tout autre histoire, dans laquelle je ne compte pas m'engager tout de suite. 


Quatorzieme etape : le navigateur 

Ah, les navigateurs. Que ferions-nous sans eux ? Et combien de fois ai-je entendu les gens regretter qu'il n'y en ait pas un et 
un seul ? Oui, mais lequel ? 

Chaque navigateur possede sa propre feuille de style par defaut. C'est celle que vous utiliserez, a moins de fournir la votre. Et 
bien entendu, les feuilles de style integrees sont toutes differentes. Elies sont issues de differentes societes, et fonctionnent 
differemment sur les diverses plate-formes informatiques. 

Leurs ressemblances sont nombreuses, bien sur, mais les differences ne sont pas negligeables pour autant. Si vous partez du 
principe que tous les autres navigateurs vont offrir un rendu « similaire » de votre page Web si amoureusement congue, vous 
allez vite vous apercevoir que « similaire » ne signifie pas « identique », et que cela peut meme signifier « franchement 
different » dans certains cas - meme si votre feuille de style CSS est valide. 

Je ne peux pas me lancer ici dans une comparaison exhaustive de tous les navigateurs, d'autant qu'il en existe enormement qui 

sont deja publiees ailleurs (http://www.qooqle.com/search?hl=en&lr=&ie=ISO-8859-1&oe=ISO-8859-1& 

q=diff%E9rences+naviqateurs+CSS&btnG=Search) . Je soulignerai simplement les quelques points qui me posent le plus de 
problemes. Generalement, cela revient a une opposition du style Internet Explorer - Reste Du Monde, mais pas toujours. Une 
liste de liens vers des navigateurs recents est toujours disponible sur la page d'infos de mon site WPDFD 
(http://www.wpdfd.com/index.htm) . Ms sont gratuits pour la plupart, ou peuvent etre essayes gratuitement. 
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Internet Explorer de Microsoft est le navigateur le plus repandu de tous. Sous ses differentes versions, il represente quelque 
chose comme 85% de tous les navigateurs utilises. Malheureusement, il n'obeit qu'a ses propres regies et ne se conforme pas 
aux memes normes que d'autres navigateurs. II en respecte la plupart, mais dans le cas contraire, les problemes sont 
inevitables. 


Le modele de boites CSS 

Dans toutes les versions d'lE (NdT : a I'exception du mode strict d'IE6, dont le fonctionnement depasse largement le perimetre 
de cet article), I'interpretation du remplissage ou « padding » est differente de celle des autres navigateurs. En consequence, 
si vous indiquez une largeur de boTte CSS en pixels, et que celle-ci est dotee d'un padding droit ou gauche, la boTte aura une 
largeur differente entre IE et les autres navigateurs, ce qui peut detruire une mise en page quand elle est tres precise. 



IE part du principe que le padding est situe a I'interieur de la boite, reduisant d'autant la largeur du texte (ce qui d'ailleurs me 
semble tout a fait logique). Les standards du W3C disent, eux, que le padding doit etre ajoute en dehors de la boTte, pour 
maintenir identique la largeur du texte. On peut debattre ad nauseam sur ce qui est le plus logique des deux, mais quoi qu'il en 
soit, vous allez etre confrontes a cette difference fondamentale qui risque de vous jouer des tours si vous ne verifiez pas vos 
pages. 


Tout est relatif 

Le positionnement « relatif » des boTtes CSS semble etre un concept assez simple. Chaque boTte occupe une place que Ton 
definit relativement a celle qui la precede immediatement. Mais attention ! Si vous sortez une boTte de son « flux naturel » en 
lui donnant une valeur par rapport au haut ou au bas de page (valeur top ou bottom), cette boTte est supposee se deplacer 
tout en laissant libre sa place initiale, comme le ferait une voiture quittant sa place de parking. Mais IE (version Mac) referme 
cet espace des qu'il est libere, remontant done d'autant tout ce qui est situe au-dessous. 




On voit a gauche ce qui doit se produire quand on deplace une boTte CSS relative : I'espace libere devient de fait une boTte 
invisible. A droite, on voit ce qu'lE (Mac) en fait : cela peut mettre a mal une presentation si on n'y prend garde. 


Attention au format du balisage 

Qa, e'est quelque chose qui m'agace vraiment, parce qu'il s'agit bel et bien d'un bogue, et non d'une mauvaise interpretation 
des standards. En principe, les navigateurs doivent ignorer completement le format du balisage HTML. Peu importe si vous 
tapez tout votre code sur une seule longue ligne horizontale, ou bien si vous preferez avoir un interligne supplementaire entre 
chaque ligne. Le bogue dans IE (Mac) est ainsi fait que si vous placez des boTtes en float sur une seule ligne, flottant toutes 
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vers la gauche, mais qu'en meme temps vous tapez le balisage correspondant sur plusieurs lignes de code distinctes, votre 
navigateur perd completement les pedales. II faut obligatoirement placer tout le balisage sur une seule ligne pour obtenir le 
resultat escompte. Franchement, ce ne serait pas un travail de Titan pour reparer ce bogue, mais le developpement d'lE 
(Mac) est mort et enterre, et il existe aujourd'hui un tel choix de meilleurs navigateurs... mais les vieux Macs, c'est comme les 
vieilles habitudes, on ne s'en debarrasse pas comme ga ! 


L’avenir 

Les specifications et les possibles des Feuilles de Style en Cascade ( Cascading Style Sheets) sont sans cesse actualisees, 
et les navigateurs egalement s'adaptent continuellement pour pouvoir faire echo a ce nouveau potentiel. C'est un processus en 
deroulement, toujours en evolution, que pilotent les membres du W3C (le World Wide Web Consortium). 

On peut esperer que les nombreuses differences d'interpretation que nous subissons actuellement finiront par etre reduites, 
sinon eliminees, mais evidemment il y a d'autres facteurs enjeu. 

Le concept meme de la lecture de pages Web sur un ecran d'ordinateur est appele a changer. On peut deja voir des pages 
Web sur des machines qui ne sont pas des ordinateurs, et du contenu transmis par le Web mais qui n'est pas visible par les 
navigateurs. 

Et ce n'est pas fini ! 

Les entreprises s'acharnent a tenter d'identifier des moyens pour integrer des fonctions d'interactivite a leurs produits ; les 
telephones, les televisions, les voitures, les refrigerateurs, les fours a micro-ondes sont tous des cibles privilegiees. Au bout du 
compte, I'implant cerebral connecte au Web nous reliera tous ensemble, permettant ainsi a la race humaine de parvenir, pour 
la communication, au meme niveau de perfection que les fourmis ! 

Avec les CSS , il importera peu de savoir sur quel support sera affiche le contenu. Elies s'adaptent deja a une grande variete 
de types de medias, meme si nous en utilisons essentiellement deux : « screen » et « print ». 

Mais ce qui est a retenir de tout cela, c'est qu'il n'est pas question de se reposer sur ses lauriers, il faut soit avancer, soit 
renoncer. 

J'arrive au terme de cette courte serie « CSS : on reprend tout a zero ! », et j'espere qu'elle vous aura donne I'envie d'en 
savoir davantage - et croyez-moi, il y en a encore beaucoup a savoir. 

Void une liste de quelques articles en anglais sur les CSS a lire sur WPDFD (http://www.wpdfd.com/index.htm) . 

Turning the Tables 

(http://www.wpdfd.com/editorial/wpd0403b.htm) Convertir en CSS des mises en page en tableaux 
Style Sheets Without Tears 

(http://www.wpdfd.com/editorial/wpd0402.htm) Serie en 3 parties sur des feuilles de style basiques 
CSS - Browser Support 

(http://www.wpdfd.com/editorial/wpd0902.htm) Comment les navigateurs gerent les CSS 

Thinking Inside the Box (http://www.wpdfd.com/editorial/wpd1002.htm) 

Les elements de construction de base pour les CSS 

Box of Tricks 

(http://www.wpdfd.com/editorial/wpd1 1 02.htm) Des effets de « rollover » sans JavaScript 

Scripting the Box (http://www.wpdfd.com/editorial/wpd0103.htm) 

La puissance des CSS associees au Javascript 


Drawing with CSS (http://www.wpdfd.eom/editorial/wpd0104review.htm#footnote) 

Comment dessiner des graphiques simples grace aux boites CSS 
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Film-strip Rollovers 

(http://www.wpdfd.com/editorial/wpd0404footnote.htm) Une methode simplifiee pour faire des « rollovers » 


Dynamic CSS Animation 

(http://www.wpdfd.eom/editorial/wpd0504news.htm#feature2) Comment faire bouger vos divs 
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